<template>

<div class="table-list">
         
      <el-table
    v-loading="loading"
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    border
    @selection-change="handleSelectionChange"
    :header-cell-style="headerCellStyle"
    >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column
      v-for="item in tableHead"
      :label="item.label"
      :prop="item.prop"     
      :key="item.label"
      :show-overflow-tooltip="tooltip"
      align = "center"
      >
      <template slot-scope="scope">
          <div class="button-row" v-if="item.type == 'button'">
              <el-button v-if="item.button && item.button.update" 
              @click="$emit('updateNotice',true,scope.row)"
              size="mini" type="success">修改</el-button>
              <el-button v-if="item.button && item.button.detele" 
              @click="$emit('deleteNotice',scope.row)"
              size="mini" type="danger">删除</el-button>
          </div>
          <div class="img-row" v-else-if="item.type== 'img'">
              <el-image 
              style="width:100px; height:100px"
              v-if="item.imgClick"
              @click="$emit()"
              :src="item.formatter ? item.formatter(scope.row, scope.row[item.prop]).url : scope.row[item.prop] "
              :preview-src-list="item.formatter ? item.formatter(scope.row, scope.row[item.prop]).images : scope.row[item.prop]"
              ></el-image>
              <el-avatar
              v-else shape="square" 
              :size="50"
              :src="item.formatter ? item.formatter(scope.row, scope.row[item.prop]) : scope.row[item.prop]">
              </el-avatar>
          </div>
          <el-switch v-else-if="item.type=='switch'"
              @change="$emit('stateChange',scope.row[item.prop])"
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
              >
              </el-switch>
              <div class="text" v-else>
                  <span v-if="item.type == 'isClick'" 
                  @click="$emit('textView',scope.row)"
                  style="cursor:pointer;color:blue;text-decoration:underline;">
                      {{ scope.row[item.prop] }}
                  </span>
                  <span v-else>
                      {{ !scope.row[item.prop] ? '---' : scope.row[item.prop] }}
                  </span>
              </div>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
export default {
    props:{
        loading:{
            type:Boolean,
            default:false
        },
        tableData:{
            type: Array,
            default: () => []
        },
        tableHead:{
            type: Array,
            default: () => []
        },
        headerCellStyle:{
            type: Object,
            default: () => {
                return {
                    background: '#f4f4f4',
                    fontSize: '14px'
                }
            }
        },
        tooltip:{
            type:Boolean,
            default:true
        },
    },
    methods:{
    handleSelectionChange(val){
        this.$emit('multipleSelection',val)
        
    } 
    }
}
</script>

<style>

</style>